<template>
  <div class="management-container">
    <div class="backdrop" v-if="showbackdrop" @click.stop="closeBackdrop">
      <img id="qrcode" :src="backdropimg" />
    </div>
    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <el-input
          placeholder="Please input"
          v-model="keyword"
          @keyup.enter.native="getFiles"
          class="input-with-select"
        >
          <el-select v-model="select" slot="prepend" placeholder="Select">
            <el-option label="按时间降" value="UNIX_TIMESTAMP(createTime)-desc"></el-option>
            <el-option label="按时间升 " value="UNIX_TIMESTAMP(createTime)-asc"></el-option>
            <el-option label="文件大小升" value="fileSize-asc"></el-option>
            <el-option label="文件大小降" value="fileSize-desc"></el-option>
          </el-select>
          <el-button slot="append" icon="el-icon-search" @click="getFiles">搜索</el-button>
        </el-input>
      </el-header>

      <el-main>
        <el-table class="table" :data="tableData" v-loading="loading">
          <el-table-column prop="createTime" label="createTime" width="140" onmouseover="mouse"></el-table-column>
          <el-table-column prop="filename" label="filename"></el-table-column>
          <el-table-column prop="fullpath" label="fullpath"></el-table-column>
          <el-table-column prop="fileSize" label="fileSize" width="120"></el-table-column>
          <el-table-column prop="handle" label="handle">
            <template slot-scope="scope">
              <el-button
                type="primary"
                icon=" el-icon-view"
                circle
                @click="handleEdit(scope.$index, scope.row)"
              ></el-button>

              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="handleDelete(scope.$index, scope.row)"
              ></el-button>

              <img
                id="qrimage"
                @click="mouse($event,scope.row)"
                src=""
              />
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[pageSize * 1, pageSize * 2, pageSize * 3, pageSize * 4]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          ></el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<style>
.management-container {
  position: relative;
}
.el-select .el-input {
  width: 150px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-main {
  min-height: calc(100vh - 72px);
}

.cell {
  display: flex;
}

.cell img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-left: 5px;
}

.backdrop {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99999;
}

.backdrop img {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.pagination {
  text-align: center;
  height: 32px;
  padding: 8px 16px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
}

.table {
  margin-bottom: 48px;
}
</style>

<script>
import fileService from "../api/file";
export default {
  data: function() {
    return {
      instance: null,
      keyword: "",
      valid: false,
      token: 0,
      select: "UNIX_TIMESTAMP(createTime)-desc",
      visible: false,
      tableData: [],
      currentPage: 1,
      loading: false,
      showbackdrop: false,
      backdropimg: "",
      pageSize: 20,
      total: 0
    };
  },
  methods: {
    mouse($event, row) {
      console.log($event, row);

      this.showbackdrop = true;

      QRCode.toDataURL(row.fullpath)
        .then(url => {
          console.log(url);
          this.backdropimg = url;
        })
        .catch(err => {
          console.error(err);
        });
    },
    closeBackdrop() {
      this.showbackdrop = false;
    },
    validToken() {
      this.getFiles();
    },
    getFiles() {
      if (!this.token) {
        return;
      }
      this.loading = true;
      const queryCondi = {
        orders: [],
        filters: [],
        currentPage: this.currentPage,
        pageSize: this.pageSize
      };
      queryCondi.orders.push({
        orderby: this.select.split("-").pop(),
        key: this.select.split("-")[0],
        priority: 2
      });
      queryCondi.filters.push({ key: "filename", value: this.keyword });
      fileService
        .getFiles(queryCondi)
        .then(response => {
          // handle success

          if (this.token) {
            localStorage.setItem("token", this.token);
          }
          console.log(response);
          this.valid = true;

          if (Array.isArray(response.data.data)) {
            this.tableData = response.data.data;
            this.total = response.data.total;
          } else {
            this.tableData.push({
              createTime: new Date().toDateString(),
              fullpath: "http://www.popochiu.com"
            });
          }
          this.loading = false;
        })
        .catch(function(error) {
          // handle error
          this.loading = false;
          console.log(error);
        });
    },
    handleEdit(index, row) {
      window.open(row.fullpath);
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
      if (!row.id) return;
      fileService.removeFileById(row.id)
        .then(response => {
          this.tableData.splice(index, 1);
        })
        .catch(function(error) {
          // handle error
          console.log(error);
        })
        .finally(function() {
          // always executed
        });
    },
    handleSizeChange(val) {
      console.log(`${val} items per page`);
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      console.log(`current page: ${val}`);
      this.currentPage = val;
      this.getFiles();
    }
  },
  mounted() {
    let token = localStorage.getItem("token");
    this.token = token;
    this.getFiles();
  }
};
</script>